@use './var.css';
@use './FormCreate/index.scss';
@use './theme.scss';
@use 'element-plus/theme-chalk/dark/css-vars.css';

.reset-margin [class*='el-icon'] + span {
  margin-left: 2px !important;
}

// 解决抽屉弹出时，body宽度变化的问题
.el-popup-parent--hidden {
  width: 100% !important;
}

// 解决表格内容超过表格总宽度后，横向滚动条前端顶不到表格边缘的问题
.el-scrollbar__bar {
  display: flex;
  justify-content: flex-start;
}

/* nprogress 适配 element-plus 的主题色 */
#nprogress {
  & .bar {
    background-color: var(--el-color-primary) !important;
  }

  & .peg {
    box-shadow:
      0 0 10px var(--el-color-primary),
      0 0 5px var(--el-color-primary) !important;
  }

  & .spinner-icon {
    border-top-color: var(--el-color-primary);
    border-left-color: var(--el-color-primary);
  }
}

/*解决右侧组件超出*/
._fd-config-item {
  width: 280px !important;
}

/* 解决图片预览时表格层级遮挡问题 */
.el-table,
.el-table * {
  z-index: 1 !important;
}

.el-table__cell,
.el-table__cell * {
  z-index: 0 !important;
}

.el-table__fixed,
.el-table__fixed-right,
.el-table__fixed *,
.el-table__fixed-right * {
  z-index: 1 !important;
}

.el-table__header-wrapper,
.el-table__body-wrapper,
.el-table__header-wrapper *,
.el-table__body-wrapper * {
  z-index: 1 !important;
}

/* 表格行元素 */
.el-table__row,
.el-table__row * {
  z-index: 0 !important;
}

/* 确保图片预览组件的层级足够高，层级关系正确 */
.el-image-viewer__wrapper {
  z-index: 99999 !important;
  position: fixed !important;
}

/* 黑色阴影背景层级最低 */
.el-image-viewer__mask {
  z-index: 99990 !important;
  position: fixed !important;
}

/* 图片容器层级在阴影之上 */
.el-image-viewer__canvas {
  z-index: 99995 !important;
  position: relative !important;
}

/* 图片本身确保在阴影之上 */
.el-image-viewer__canvas img {
  z-index: 99996 !important;
  position: relative !important;
}

/* 按钮层级最高 */
.el-image-viewer__btn {
  z-index: 99997 !important;
  position: relative !important;
}

/* 图片预览时的其他元素 */
.el-image-viewer__actions {
  z-index: 99998 !important;
  position: relative !important;
}

.el-image-viewer__close {
  z-index: 99998 !important;
  position: relative !important;
}

/* Element Plus 图片组件本身 */
.el-image {
  z-index: 2 !important;
}

.el-image__inner {
  z-index: 2 !important;
}
